<template>
  <div class="usrpwd">
    <a-input size="large" ref="userNameInput" v-model="userinfo.username" placeholder="用户名">
      <a-icon slot="prefix" type="user" />
      <a-tooltip slot="suffix" title="Extra information">
        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
      </a-tooltip>
    </a-input>
    <a-input
      size="large"
      ref="userNameInput"
      v-model="userinfo.password"
      type="password"
      placeholder="密码"
      @change="changedata"
    >
      <a-icon slot="prefix" type="lock" />
      <a-tooltip slot="suffix" title="Extra information">
        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
      </a-tooltip>
    </a-input>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userinfo: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    changedata (e) {
      this.$store.commit('setUserinfo', this.userinfo)
    }
  }
}
</script>

<style lang='scss' scoped>
.ant-input-affix-wrapper {
  margin-bottom: 2em;
}
</style>
